<template>
  <div class="form-statistics-container">
    <div class="qs-box">
      <div class="top-box">
        <div class="label-box">
          <span class="index">{{formItem.labelIndex}}、</span>
          <span class="label">{{formItem.label}}</span>
          <span class="cmp-type">{{`[${formItem.compName}]`}}</span>
        </div>
        <div class="writer-num">
          <span>收集结果：{{formItem.writerNum}}条</span>
          <el-button v-if="!props.showAll" size="small" type="" @click="handleShowAll">查看更多</el-button>
        </div>
      </div>
      <div class="table">
        <el-table max-height="400px" :data="props.showAll ? formItem.result : formItem.result.slice(0, 4)" style="width: 100%" border>
          <el-table-column prop="index" label="序号" width="200" align="center"/>
          <el-table-column prop="label" label="内容" align="center"/>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  formItem: {
    type: Object,
  },
  showAll: {
    type: Boolean,
    default: false
  },
})
setTimeout(() => {
  console.log('showAll',props.formItem);
}, 500);
const formItem = computed(()=>{return props.formItem})
const emit = defineEmits(['handleShowAll'])
const handleShowAll = () => {
  emit('handleShowAll', formItem.value)
}
</script>
<style scoped lang='scss'>
</style>